import React, {useContext, useEffect, useState} from "react";
import {Icon, Input, ListItem, Overlay} from "react-native-elements";
import {Dimensions, ImageBackground, View, Text, TouchableOpacity} from "react-native";
import AlertBG from '../assets/AlertBG.png';
import {formartMoney} from "../libs/helpers";
import LocaleContext from "../libs/locale";
import WalletContext from "../libs/wallet";

const {width, height} = Dimensions.get("window");

const MyAlert = ({visible,showTranInfoIN,inputPasswordIN,amount,addressOut}:any) => {
    const [showTranInfo,setShowTranInfo] = useState(showTranInfoIN);
    const [inputPassword,setInputPassword] = useState(inputPasswordIN);
    const [pwdVisible, setPwdVisible] = useState(false);
    const [pwd, setPwd] = useState('');
    const [pwdError, setPwdError] = useState('');         //TODO 2021-03-07
    const [transfering, setTransfering] = useState(false);


    const locale: any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);

    useEffect(()=>{
        // console.log("MyAlert!")
        // console.log(BTNcount==2)
    })
    return(
        visible?(
               <View style={{marginTop:-height,width:width}}>
                   {
                       showTranInfo?
                           <View style={{marginTop: -height, alignItems: 'center'}}>
                               <View style={{width: width, height: height}}>
                                   <View style={{
                                       alignItems: 'center',
                                       flex: 1,
                                       opacity: 0.5,
                                       backgroundColor: 'black'
                                   }}>
                                       {/*上面阴影部分点击关闭详情窗口*/}
                                       <TouchableOpacity style={{height: height * 0.5, width: "100%"}}
                                                         onPress={()=>{setShowTranInfo(false)}}>

                                       </TouchableOpacity>
                                   </View>
                                   <View style={{
                                       width: "100%",
                                       backgroundColor: 'white',
                                       minHeight: 380,
                                   }}>
                                       <View style={{
                                           flexDirection: 'row',
                                           paddingVertical: 20,
                                       }}>
                                           <Text style={{
                                               fontSize: 18,
                                               fontWeight: 'bold',
                                               textAlign: 'center',
                                               flex: 1
                                           }}>{locale?._('Assets.send.payDetailTitle')}</Text>
                                           {/*× 关闭详情窗口  */}
                                           <TouchableOpacity
                                               style={{position: 'absolute', padding: 20}}
                                               onPress={()=>{setShowTranInfo(false)}}>
                                               <Icon type='font-awesome' name='close' color='#333333FF'
                                                     size={24}/>
                                           </TouchableOpacity>
                                       </View>
                                       {/***交易金额**/}
                                       <View style={{
                                           height: 80,
                                           justifyContent: 'center',
                                           alignItems: 'center'
                                       }}>
                                           <Text
                                               style={{fontSize: 25, fontWeight: 'bold', textAlign: 'center'}}>
                                               -{formartMoney(amount,2)} SAT
                                           </Text>

                                       </View>
                                       {/*<View style={ {height:1,backgroundColor:'#8a8a8a'}}/>*/}
                                       {/***收款账户**/}
                                       <ListItem bottomDivider>
                                           <Text style={{width: 100, fontSize: 18, textAlign: 'center'}}>
                                               {locale?._('Assets.send.payDetailReceiver')}
                                           </Text>
                                           <ListItem.Content>
                                               <ListItem.Title> {addressOut}</ListItem.Title>
                                           </ListItem.Content>
                                       </ListItem>
                                       {/***付款账户**/}
                                       <ListItem bottomDivider>
                                           <Text style={{width: 100, fontSize: 18, textAlign: 'center'}}>
                                               {locale?._('Assets.send.payDetailTitleSender')}
                                           </Text>
                                           <ListItem.Content>
                                               <ListItem.Title>{wallet.address}</ListItem.Title>
                                           </ListItem.Content>
                                       </ListItem>
                                       {/***‘确定’按钮**/}
                                       <TouchableOpacity style={{
                                           width: 334,
                                           height: 40,
                                           justifyContent: 'center',
                                           backgroundColor: '#088DE8',
                                           alignItems: 'center',
                                           alignSelf: 'center' ,
                                           marginTop: 20,
                                           borderColor: '#088DE8',
                                           borderWidth: 1,
                                           borderRadius: 10
                                       }}
                                                         onPress={() => {
                                                             // this.state.showTranInfo = false;
                                                             // this.state.inputPassword = true;
                                                             setShowTranInfo(false)
                                                             setInputPassword(true)
                                                         }}>
                                           <Text style={{
                                               // marginTop: 160,
                                               fontSize: 20,
                                               textAlign: 'center',
                                               color: 'white'
                                           }}>{locale._('Assets.send.payDetailBtnOK')}</Text>
                                       </TouchableOpacity>
                                   </View>
                               </View>
                           </View>
                           :null
                   }
                   {
                       inputPassword?
                           <View style={{marginTop: -height, alignItems: 'center'}}>
                               <View style={{width: '100%', height: height}}>
                                   <View style={{
                                       alignItems: 'center',
                                       flex: 1,
                                       backgroundColor: 'black',
                                       opacity: 0.5
                                   }}>
                                       <TouchableOpacity style={{height: height * 0.5, width: "100%"}}
                                                         onPress={() => {setInputPassword(false)}}>
                                       </TouchableOpacity>
                                   </View>
                                   <View style={{
                                       backgroundColor: 'white',
                                       // borderTopLeftRadius: 27,
                                       // borderTopRightRadius: 27,
                                       minHeight: 280,
                                   }}>
                                       <View style={{
                                           flexDirection: 'row',
                                           paddingVertical: 20,
                                       }}>
                                           <Text style={{
                                               fontSize: 18,
                                               fontWeight: 'bold',
                                               textAlign: 'center',
                                               flex: 1
                                           }}>{locale?._('Import.password')}</Text>
                                           <TouchableOpacity
                                               style={{position: 'absolute', padding: 20}}
                                               onPress={() => {setInputPassword(false)}}
                                           >
                                               <Icon type='font-awesome' name='close' color='#333333FF'
                                                     size={24}/>
                                           </TouchableOpacity>
                                       </View>
                                       <Input
                                           autoFocus={true}
                                           placeholder={locale?._('Assets.send.pwHint')}
                                           rightIcon={<Icon
                                               name={pwdVisible ? 'eye' : 'eye-off'}
                                               type='feather'
                                               onPress={() => {setPwdVisible(!pwdVisible)}}
                                           />}
                                           secureTextEntry={!pwdVisible}
                                           errorMessage={pwdError}
                                           onChangeText={value => {setPwd(value)}}
                                           // onFocus={()=>{setPWDfocus(true);}}
                                           // onBlur={()=>{setPWDfocus(false)}}
                                       />
                                       <View style={{flex: 1}}></View>
                                       <View style={{
                                           flexDirection: 'row',
                                           bottom: 0,
                                           marginTop: 10,
                                           marginBottom: 20,
                                           alignSelf: 'center'
                                       }}>
                                           {
                                               pwd
                                                   ?
                                                   <TouchableOpacity style={{
                                                       width: "96%",
                                                       height: 40,
                                                       justifyContent: 'center',
                                                       backgroundColor: '#088DE8',
                                                       alignItems: 'center',
                                                       borderColor: '#088DE8',
                                                       borderWidth: 1,
                                                       borderRadius: 10
                                                   }}
                                                                     disabled={transfering}
                                                                     onPress={Method}>
                                                       <Text style={{
                                                           // marginTop: 160,
                                                           fontSize: 20,
                                                           textAlign: 'center',
                                                           color: 'white'
                                                       }}>{locale._('Assets.send.payDetailBtnOK')}</Text>
                                                   </TouchableOpacity>
                                                   :
                                                   <TouchableOpacity style={{
                                                       width: "96%",
                                                       height: 40,
                                                       justifyContent: 'center',
                                                       backgroundColor: '#C6C7CB',
                                                       alignItems: 'center',
                                                       borderColor: '#C6C7CB',
                                                       borderWidth: 1,
                                                       borderRadius: 10
                                                   }} onPress={Method}>
                                                       <Text style={{
                                                           // marginTop: 160,
                                                           fontSize: 20,
                                                           textAlign: 'center',
                                                           color: 'white'
                                                       }}>{locale._('Assets.send.payDetailBtnOK')}</Text>
                                                   </TouchableOpacity>
                                           }
                                       </View>
                                   </View>
                               </View>
                           </View>
                           :null
                   }
               </View>
        ):null
    )
};
export default MyAlert;
